<template>
  <div class="wrapper">
    <el-table 
      :data="store.view.data" 
      style="width: 100%" 
      v-bind="$attrs" 
      v-on="$listeners" 
      @selection-change="handleSelectionChange" 
      v-table-loading="store"
      v-table-error="store"
    >
      <slot></slot>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="100"
      @current-change="currentChange"
      :current-change.sync="store.view.page"
      >
    </el-pagination>
  </div>
</template>
<script>
import { tableError } from '@/directives/directive-table-error.js'
import { tableLoading } from '@/directives/directive-table-loading'

export default {
  name: 'StoreTableComp',
  props: ['store','dataLabel'],
  provide(){
    return {
      'store': this.store,
      'editorIndex': this.editorIndex
    }
  },
  created(){
    if(this.store && this.store.autoLoad && this.store.loadStrategy === 'created'){      
      this.store.loadData()   
    }
  },
  data(){
    return {
      editorIndex: [],
      value: false
    }
  },
  methods:{
    // 选中功能 将选中的表格提交至后端 
    handleSelectionChange(val){
      console.log(val);
    },
    async currentChange(val){ 
     await this.store.loadPage({page: val, pageSzie: 10})
    },
    retry(){
      this.store.loadData()
    }
  },
  // 自定义指令 效果为: 让加载中的效果不覆盖表头
  // 自定义指令让Loading效果再table内容区域显示而不是整体区域显示即可
  // 自定义指令的方式可以 template #empty + div 的方式也可以 
  // 记得文件放在同一个文件夹中
  directives:{
    tableError,
    tableLoading
  }
}
</script>